<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<script type="text/javascript">
	    window._AMapSecurityConfig = { securityJsCode: '3e1f5f88e020ce5cfbe77388a3ae756d' };
	</script>
    <title>浏览器精确定位</title>
      <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        .map-container {
			top:55px;
          width: 100%;
          height: 460px;
        }
        
        .info {
          width: 90%;
          position: relative;
          margin: 0.5rem 5%;
          box-sizing: border-box;
          box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
          padding: 10px;
		  left:3px;
        }
        
        .panel {
          position: relative;
          background-color: white;
          overflow-y: auto;
          width: 90%;
          margin: 0 5%;
          box-sizing: border-box;
          box-shadow: 0 2px 6px 0 rgba(114, 124, 245, 0.5);
		  top:60px;
		  left:3px;
        }
        .amap_lib_placeSearch {
            border: 1px solid #ebedf0;
            border-radius: 2px;
            padding: 5px 10px 2px;
        }
        .amap_lib_placeSearch {
            font-family: Microsoft Yahei, Helvetica Neue, Helvetica, Arial, sans-serif;
            color: #565656;
            font-size: 12px;
            line-height: 22px;
            word-wrap: break-word;
            background-color: #fff;
            border: 1px solid silver;
            -webkit-text-size-adjust: none;
            text-size-adjust: none;
            min-width: 270px;
        }
        .amap_lib_placeSearch_list {
            background: #fff none repeat scroll 0 0;
        }
        .amap_lib_placeSearch_page {
            white-space: nowrap;
            text-align: right;
            margin: 8px 0 5px;
            padding: 2px;
            overflow: hidden;
        }
        .amap_lib_placeSearch ol, .amap_lib_placeSearch ul {
            list-style: outside none none;
            margin: 0;
            padding: 0;
        }
        .amap_lib_placeSearch .poibox {
            border-bottom: 1px solid #e8e8e8;
            cursor: pointer;
            padding: 10px 5px;
            position: relative;
            min-height: 35px;
        }
        .amap_lib_placeSearch_pic {
            width: 46px;
            height: 46px;
            float: left;
            margin: 4px 10px 0 0;
        }
        .amap_lib_placeSearch_pic img {
            width: 46px;
            height: 46px;
        }
        .amap_lib_placeSearch .poibox .poi-title {
            margin-left: 25px;
            font-size: 14px;
            font-weight: 700;
            overflow: hidden;
			text-overflow: ellipsis;
        }
        .amap_lib_placeSearch h1, .amap_lib_placeSearch h2, .amap_lib_placeSearch h3, .amap_lib_placeSearch h4, .amap_lib_placeSearch h5 {
            font-weight: 400;
            margin: 0;
        }
        .amap_lib_placeSearch .poibox .poi-info {
            word-break: break-all;
            margin: 0 0 0 25px;
            overflow: hidden;
        }
        .amap_lib_placeSearch .poibox .poi-info p {
            color: #999;
            font-family: Tahoma;
            line-height: 20px;
        }
        .amap_lib_placeSearch .amap-ellipsis {
            max-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .amap_lib_placeSearch p {
            margin: 0;
        }
        .amap_lib_placeSearch_page>div {
            float: left;
            margin-right: 5px;
        }
        .amap_lib_placeSearch_page>div>p {
            margin: 0;
            padding: 0;
            white-space: nowrap;
        }
        .amap_lib_placeSearch p {
            margin: 0;
        }
		.amap_lib_placeSearch .amap_lib_placeSearch_page .current {
		    border-color: #0091ff;
		    color: #0091ff;
		    margin-left: -2px;
		}
        .amap_lib_placeSearch_page>div>p>span {
            display: inline-block;
            padding: 0 2px;
            min-width: 15px;
            height: 18px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            line-height: 18px;
            text-align: center;
            margin-right: 3px;
        }
        .amap_lib_placeSearch .pageLink {
            cursor: pointer;
            line-height: 16px;
            display: inline-block;
            text-align: center;
            padding: 0 4px;
        }
		.settingsButton {
		            border: none; /* 去掉边框 */
		            background: none; /* 去掉背景 */
		            cursor: pointer; /* 改变鼠标指针为手型 */
		            font-size: 1.5em; /* 调整图标大小 */
		            margin-left: 10px; /* 给图标一些左边距 */
		        }
		 .custom-marker {
		        width: 24px;
		        height: 24px;
		        background-color: red; /* 自定义颜色 */
		        border-radius: 50%;
		        text-align: center;
		        line-height: 24px;
		        color: white;
		        font-size: 12px;
		    }
		.amap-icon img {
		    position: absolute;
		    z-index: -1;
		    width: 19px;
		    height: 32px;
		}
		.action-btn {
			float: right;
		    margin-left: auto; /* 将按钮推到最右边 */
		    background-color: #007bff;
		    color: white;
		    border: none;
		    padding: 5px 10px;
		    cursor: pointer;
		    border-radius: 4px;
		}
		#panel1 {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            left: 5px;
            width: 230px;
        }
        #panel1 .amap-call {
            background-color: #009cf9;
            border-top-left-radius: 4px;
   	        border-top-right-radius: 4px;
        }
        #panel1 .amap-lib-walking {
	        border-bottom-left-radius: 4px;
   	        border-bottom-right-radius: 4px;
            overflow: hidden;
        }
		 .content-window-card {
		            position: relative;
		            box-shadow: none;
		            bottom: 0;
		            left: 0;
		            width: auto;
		            padding: 0;
		        }
		
		        .content-window-card p {
		            height: 2rem;
		        }
		
		        .custom-info {
		            border: solid 1px silver;
		        }
		
		        div.info-top {
		            position: relative;
		            background: none repeat scroll 0 0 #F9F9F9;
		            border-bottom: 1px solid #CCC;
		            border-radius: 5px 5px 0 0;
		        }
		
		        div.info-top div {
		            display: inline-block;
		            color: #333333;
		            font-size: 14px;
		            font-weight: bold;
		            line-height: 31px;
		            padding: 0 10px;
		        }
		
		        div.info-top img {
		            position: absolute;
		            top: 10px;
		            right: 10px;
		            transition-duration: 0.25s;
		        }
		
		        div.info-top img:hover {
		            box-shadow: 0px 0px 5px #000;
		        }
		
		        div.info-middle {
		            font-size: 12px;
		            padding: 10px 6px;
		            line-height: 20px;
		        }
		
		        div.info-bottom {
		            height: 0px;
		            width: 100%;
		            clear: both;
		            text-align: center;
					transform: translateX(-48%);
		        }
		
		        div.info-bottom img {
		            position: relative;
		            z-index: 104;
		        }
		
		        span {
		            margin-left: 5px;
		            font-size: 11px;
		        }
		
		        .info-middle img {
		            float: left;
		            margin-right: 6px;
					weight: 100px;
					height: 66px;
		        }
				.input-card {
				            width: 150px;
				            top: 10px;
				            left: 10px;
				            bottom: auto;
				        }
				      img{
				        float:right;
				      }
    </style>
</head>
<body>
<div>
      <div id="container" class="map-container"></div>
      <!-- <div class="info">
        <h4 id="status">{{ statusText }}</h4>
        <hr />
        <p id="result">{{ resultText }}</p>
      </div> -->
      <div id="panel" class="panel"></div>
	  <div id="panel1"></div>
	  <div class='input-card' id='card' style="display: none;">
	    <div>
	      <img src="https://webapi.amap.com/images/close2.gif" id="closeBtn">
	    </div>
	      <div class="input-item">
	          <input type="checkbox"  onclick="toggleScale(this)"/>比例尺
	      </div>
	      
	      <div class="input-item">
	          <input type="checkbox" id="toolbar"  onclick="toggleToolBar(this)"/>工具条
	      </div>
	      
	      <div class="input-item">
	          <input type="checkbox" id="controlBar"  onclick="toggleControlBar(this)"/>工具条方向盘
	      </div>
	      
	      <div class="input-item">
	          <input type="checkbox" id="overview"  onclick="toggleOverViewShow(this)"/>显示鹰眼
	      </div>
		  
		  <div class="input-item">
		      <input type="checkbox" id="walk" checked onclick="toggleWalkShow(this)"/>显示步行规划路线
		  </div>
	  </div>
    </div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=536d45bd438bb27608cf0a5021044b49&&plugin=AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.ControlBar,AMap.Walking"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">   
<script type="text/javascript">
	let pos;
    var scale = new AMap.Scale(),
        toolBar = new AMap.ToolBar({
            position: {
                top: '110px',
                right: '40px'
            }
        }),
        controlBar = new AMap.ControlBar({
            position: {
                top: '10px',
                right: '10px',
            }
        }),
        overView = new AMap.HawkEye({
            opened: false
        }),
        map = new AMap.Map("container", {
            resizeEnable: true,
			zoom:18,
        });
        map.addControl(scale);
        map.addControl(toolBar);
        map.addControl(controlBar);
        map.addControl(overView);
		document.getElementById('closeBtn').onclick = function() {
		  document.getElementById('card').style.display = 'none';
		}
		function toggleScale(checkbox) {
		        if (checkbox.checked) {
		            scale.show();
		        } else {
		            scale.hide();
		        }
		    }
		    function toggleToolBar(checkbox) {
		        if (checkbox.checked) {
		            showToolBar();
		        } else {
		            hideToolBar();
		        }
		    }
		    function toggleControlBar(checkbox) {
		        if (checkbox.checked) {
		            document.getElementById('controlBar').checked = true;
		            controlBar.show();
		        } else {
		            document.getElementById('controlBar').checked = false;
		            controlBar.hide();
		        }
		    }
		    function toggleOverViewShow(checkbox) {
		        if (checkbox.checked) {
		            overView.show();
		        } else {
		            overView.hide();
		        }
		    }
			function toggleWalkShow(checkbox) {
			    if (checkbox.checked) {
			        document.getElementById('panel1').style.display = '';
			    } else {
			        document.getElementById('panel1').style.display = 'none';
			    }
			}
		    function showToolBar() {
		        document.getElementById('toolbar').checked = true;
		        toolBar.show();
		    }
		    function hideToolBar() {
		        document.getElementById('toolbar').checked = false;
		        toolBar.hide();
		    }
		var walking = new AMap.Walking({
		        map: map,
		        panel: "panel1"
		    }); 
    AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            position:'RB',    //定位按钮的停靠位置
            offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
			showCircle:false,
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                onComplete(result)
            }else{
                onError(result)
            }
        });
    });
    //解析定位结果
    function onComplete(data) {
        //document.getElementById('status').innerHTML='定位成功'
        var str = [];
        str.push('定位结果：' + data.position);
        str.push('定位类别：' + data.location_type);
        if(data.accuracy){
             str.push('精度：' + data.accuracy + ' 米');
        }//如为IP精确定位结果则没有精度信息
        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
        //document.getElementById('result').innerHTML = str.join('<br>');
		pos=data.position;
		var circle = new AMap.Circle({
		        center: data.position,
		        radius: 300, //半径
		        borderWeight: 3,
		        strokeColor: "#3366FF", 
		        strokeOpacity: 0.3,
		        strokeWeight: 3,
		        fillOpacity: 0.35,
		        fillColor: '#1791fc',
		    })
			map.add(circle);
		searchPlacesWebAPI(data.position);
    }
    //解析定位错误信息
    function onError(data) {
        document.getElementById('status').innerHTML='定位失败'
        document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message+'</br>浏览器返回信息：'+data.originMessage;
    }
	 // 使用 Web 服务 API 进行地点搜索
	    function searchPlacesWebAPI(position) {
	        const apiKey = '009e119552bb9496f1be650e182c239b'; // 替换为你的实际 API Key
	        const url = `https://restapi.amap.com/v3/place/around?location=${position.lng},${position.lat}&keywords=&types=餐饮服务&radius=300&offset=50&extensions=all&key=${apiKey}`;
	
	        fetch(url)
	            .then(response => response.json())
	            .then(data => {
	                if (data.status === '1') {
	                    console.log('搜索成功:', data);
	                    displayResults(data.pois);
	                } else {
	                    console.error('搜索失败:', data.info);
	                }
	            })
	            .catch(error => {
	                console.error('请求失败:', error);
	            });
	    }
	
		let markers = [];
	    let currentPage = 1;
	    const resultsPerPage = 5;
	    let pois; // 将 pois 定义为全局变量
	    
	    // 显示搜索结果
	    function displayResults(poiData) {
	        pois = poiData; // 将传入的 poi 数据赋值给全局变量 pois
			console.log(pois);
	        const panel = document.getElementById('panel');
	        panel.innerHTML = ''; // 清空之前的搜索结果
	    
	        if (pois && pois.length > 0) {
	            // 计算总页数
	            const totalPages = Math.ceil(pois.length / resultsPerPage);
	    
	            // 添加新的样式和布局
	            panel.innerHTML = `
	                <div class="amap_lib_placeSearch">
	                    <div class="amap_lib_placeSearch_list">
	                        <ul id="poiList"></ul>
	                    </div>
	                    <div class="amap_lib_placeSearch_page" id="pageLinks"></div>
	                </div>
	            `;
	    
	            renderPoiList(currentPage);
	            renderPagination(totalPages, currentPage);
	            updateMarkers(currentPage);
	        } else {
	            panel.innerHTML = '<p>没有找到相关结果。</p>';
	        }
	    }
	    
	    // 渲染当前页的地点列表
	    function renderPoiList(page) {
	            const start = (page - 1) * resultsPerPage;
	            const end = start + resultsPerPage;
	            const poiList = document.getElementById('poiList');
	            poiList.innerHTML = ''; // 清空列表
	    
	            let currentActiveButton = null; 
	    
	            for (let i = start; i < end && i < pois.length; i++) {
	                (function(i) { // 使用 IIFE 创建新的作用域
	                    let imgHtml = '';
	                    if (pois[i].photos && pois[i].photos[0] && pois[i].photos[0].url) {
	                        imgHtml = `<img src="${pois[i].photos[0].url}" alt="${pois[i].name}">`;
	                    } else {
	                        // 如果没有照片，则使用默认占位图
	                        imgHtml = '<img src="http://store.is.autonavi.com/showpic/dcd7fbeecec1d3974604efe2ad399db4" alt="无图片">';
	                    }
	    
	                    const liElement = document.createElement('li');
	                    liElement.className = 'poibox';
	                    liElement.dataset.idx = i;
	                    liElement.innerHTML = `
	                        <div class="amap_lib_placeSearch_pic">
	                            ${imgHtml}
	                        </div>
	                        <button class="action-btn">开始导航</button>
	                        <h3 class="poi-title">
	                            <span class="poi-name amap-ellipsis">${pois[i].name}</span>
	                        </h3>
	                        <div class="poi-info">
	                            <p class="poi-addr amap-ellipsis">${pois[i].address ? `地址：${pois[i].address}` : '地址：无'}</p>
	                            <p class="poi-tel amap-ellipsis">${(pois[i].tel && pois[i].tel[0]) ? `电话：${pois[i].tel}` : '电话：无'}</p>
	                        </div>
	                    `;
	    
	                    var title = pois[i].name,
	                        content = [];
	                    if (pois[i].photos && pois[i].photos[0] && pois[i].photos[0].url) {
	                        content.push(`<img src="${pois[i].photos[0].url}" alt="${pois[i].name}">`);
	                    } else {
	                        content.push('<img src="http://store.is.autonavi.com/showpic/dcd7fbeecec1d3974604efe2ad399db4" alt="无图片">');
	                    }
	    
	                    content.push(`${pois[i].address ? `地址：${pois[i].address}` : '地址：无'}`);
	                    content.push(`${(pois[i].tel && pois[i].tel[0]) ? `电话：${pois[i].tel}` : '电话：无'}`);
	                    content.push(`${pois[i].distance ? `距离：${pois[i].distance}米` : '距离：无'}`);
	                    var infoWindow = new AMap.InfoWindow({
	                        isCustom: true,  //使用自定义窗体
	                        content: createInfoWindow(title, content.join("<br/>")),
	                        offset: new AMap.Pixel(18, -23)
	                    });
	    
	                    poiList.appendChild(liElement);
	    
	                    // 为整个 li 元素绑定点击事件
	                    liElement.addEventListener('click', (event) => {
	                        // 确保点击的是 li 元素本身或其子元素（除了按钮）
	                        if (!event.target.classList.contains('action-btn')) {
	                            var targetPosition = pois[i].location.split(",");
	                            console.log(pois[i].name);
	                            map.setZoomAndCenter(18, targetPosition, true);
	                            infoWindow.open(map, targetPosition);
	                        }
	                    });
	    
	                    let isClicked = false;
	                    // 为按钮绑定点击事件
	                    const button = liElement.querySelector('.action-btn');
	                    button.addEventListener('click', (event) => {
	                        event.stopPropagation(); // 阻止事件冒泡到 li 元素
	                        if (isClicked) {
	                            walking.clear();
	                            // 如果已经点击过，则恢复默认状态
	                            button.style.backgroundColor = '#007bff'; // 默认背景颜色
	                            button.textContent = '开始导航'; // 默认文本
	                            isClicked = false;
	                            currentActiveButton = null;
	                        } else {
	                            if (currentActiveButton && currentActiveButton !== button) {
	                                alert("导航还没结束");
	                            } else {
	                                handlePoiboxClick(pois[i]);
	                                // 如果未点击过，则更改状态
	                                button.style.backgroundColor = '#ff6347'; // 新的背景颜色（例如红色）
	                                button.textContent = '结束导航'; // 新的文本
	                                isClicked = true;
	                                currentActiveButton = button;
	                            }
	                        }
	                    });
	                })(i); // 立即执行函数表达式
	            }
	        }
		
		function handlePoiboxClick(poi) {
				console.log(pos);
		        walking.search(new AMap.LngLat(pos.lng, pos.lat), poi.location.split(","), function(status, result) {
		                // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
		                if (status === 'complete') {
		                    log.success('绘制步行路线完成')
		                } else {
		                    log.error('步行路线数据查询失败' + result)
		                } 
						});
		    }
	    
	    // 渲染分页链接
	    function renderPagination(totalPages, currentPage) {
	        const pageLinksDiv = document.getElementById('pageLinks');
	        pageLinksDiv.innerHTML = ''; // 清空分页链接
	    
	        // 计算起始和结束页码
	        const startPage = Math.max(currentPage - 2, 1);
	        const endPage = Math.min(currentPage + 2, totalPages);
	    
	        let paginationHTML;
	        if (currentPage === 1) {
	            paginationHTML = `
	                <div>
	                    <p>
	                        ${Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index)
	                              .map(pageNo => `
	                                  <span ${currentPage === pageNo ? 'class="current"' : ''}>
	                                      <a pageno="${pageNo}" class="pageLink">${pageNo}</a>
	                                  </span>
	                              `).join('')}
	                        <span><a id="nextPage" pageno="next" class="pageLink">下一页</a></span>
	                        <!-- 添加设置按钮 -->
	                        <button id="settingsBtn" class="settingsButton"><i class="fas fa-cog"></i></button>
	                    </p>
	                </div>
	            `;
	        } else if (currentPage === totalPages) {
	            paginationHTML = `
	                <div>
	                    <p>
	                        <span><a id="prevPage" pageno="prev" class="pageLink">上一页</a></span>
	                        ${Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index)
	                              .map(pageNo => `
	                                  <span ${currentPage === pageNo ? 'class="current"' : ''}>
	                                      <a pageno="${pageNo}" class="pageLink">${pageNo}</a>
	                                  </span>
	                              `).join('')}
	                        <!-- 添加设置按钮 -->
	                        <button id="settingsBtn" class="settingsButton"><i class="fas fa-cog"></i></button>
	                    </p>
	                </div>
	            `;
	        } else {
	            paginationHTML = `
	                <div>
	                    <p>
	                        <span><a id="prevPage" pageno="prev" class="pageLink">上一页</a></span>
	                        ${Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index)
	                              .map(pageNo => `
	                                  <span ${currentPage === pageNo ? 'class="current"' : ''}>
	                                      <a pageno="${pageNo}" class="pageLink">${pageNo}</a>
	                                  </span>
	                              `).join('')}
	                        <span><a id="nextPage" pageno="next" class="pageLink">下一页</a></span>
	                        <!-- 添加设置按钮 -->
	                        <button id="settingsBtn" class="settingsButton"><i class="fas fa-cog"></i></button>
	                    </p>
	                </div>
	            `;
	        }
	        pageLinksDiv.innerHTML = paginationHTML;
	    
	        // 绑定分页链接的点击事件
	        document.querySelectorAll('.pageLink').forEach((link) => {
	            link.addEventListener('click', (event) => {
	                walking.clear();
	                const newPage = event.target.getAttribute('pageno');
	                if (newPage === 'prev') {
	                    if (currentPage > 1) {
	                        currentPage--;
	                        renderPoiList(currentPage);
	                        renderPagination(totalPages, currentPage);
	                        updateMarkers(currentPage); // 更新地图上的点标记
	                    }
	                } else if (newPage === 'next') {
	                    if (currentPage < totalPages) {
	                        currentPage++;
	                        renderPoiList(currentPage);
	                        renderPagination(totalPages, currentPage);
	                        updateMarkers(currentPage); // 更新地图上的点标记
	                    }
	                } else {
	                    const pageNum = parseInt(newPage);
	                    if (pageNum !== currentPage) {
	                        currentPage = pageNum;
	                        renderPoiList(currentPage);
	                        renderPagination(totalPages, currentPage);
	                        updateMarkers(currentPage); // 更新地图上的点标记
	                    }
	                }
	            });
	        });
	    
	        // 添加设置按钮的点击事件监听器
	        document.getElementById('settingsBtn').addEventListener('click', () => {
	             document.getElementById('card').style.display = '';
	            // 在这里处理设置按钮点击后的逻辑
	        });
	    }
		function updateMarkers(page) {
		        // 清除之前的点标记
		        clearMarkers();
		
		        // 根据当前页计算需要显示的POI
		        const start = (page - 1) * resultsPerPage;
		        const end = start + resultsPerPage;
	
		        for (let i = start; i < end && i < pois.length; i++) {
		                    const poi = pois[i];
		                    const marker = new AMap.Marker({
		                        title: poi.name, // 周边地点名称
		                        position: poi.location.split(","), // 周边地点坐标
								icon: "https://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png",
		                    });
		                    console.log(marker);
		                    marker.setMap(map);
		        
		                    markers.push(marker);
		        
		                    var title = poi.name,
		                        content = [];
		                    if (poi.photos && poi.photos[0] && poi.photos[0].url) {
		                        content.push(`<img src="${poi.photos[0].url}" alt="${poi.name}">`);
		                    } else {
		                        content.push('<img src="http://store.is.autonavi.com/showpic/dcd7fbeecec1d3974604efe2ad399db4" alt="无图片">');
		                    }
		        
		                    content.push(`${poi.address ? `地址：${poi.address}` : '地址：无'}`);
		                    content.push(`${(poi.tel && poi.tel[0]) ? `电话：${poi.tel}` : '电话：无'}`);
		                    content.push(`${poi.distance ? `距离：${poi.distance}米` : '距离：无'}`);
		        
		                    // 创建 InfoWindow 并将其与 marker 关联
		                    const infoWindow = new AMap.InfoWindow({
		                        isCustom: true,  // 使用自定义窗体
		                        content: createInfoWindow(title, content.join("<br/>")),
		                        offset: new AMap.Pixel(18, -23)
		                    });
		        
		                    // 将 infoWindow 绑定到 marker 上
		                    marker.infoWindow = infoWindow;
		        
		                    // 为每个 marker 添加点击事件
		                    marker.on('click', function(e) {
		                        this.infoWindow.open(map, this.getPosition());
		                    });
		                }
		    }
		
		function createInfoWindow(title, content) {
		    var info = document.createElement("div");
		    info.className = "custom-info input-card content-window-card";
		
		    //可以通过下面的方式修改自定义窗体的宽高
		    info.style.width = "300px";
		    // 定义顶部标题
		    var top = document.createElement("div");
		    var titleD = document.createElement("div");
		    var closeX = document.createElement("img");
		    top.className = "info-top";
		    titleD.innerHTML = title;
		    closeX.src = "https://webapi.amap.com/images/close2.gif";
		    closeX.onclick = closeInfoWindow;
		
		    top.appendChild(titleD);
		    top.appendChild(closeX);
		    info.appendChild(top);
		
			
		    // 定义中部内容
		    var middle = document.createElement("div");
		    middle.className = "info-middle";
		    middle.style.backgroundColor = 'white';
			content = content.replace(/<br\s*\/?>/i, '');
		    middle.innerHTML = content;
		    info.appendChild(middle);
		
		    // 定义底部内容
		    var bottom = document.createElement("div");
		    bottom.className = "info-bottom";
		    bottom.style.position = 'relative';
		    bottom.style.top = '0px';
		    bottom.style.margin = '0 auto';
		    var sharp = document.createElement("img");
		    sharp.src = "https://webapi.amap.com/images/sharp.png";
		    bottom.appendChild(sharp);
		    info.appendChild(bottom);
		    return info;
		}
		
		//关闭信息窗体
		function closeInfoWindow() {
		    map.clearInfoWindow();
		}
		    // 清除地图上的所有点标记
		    function clearMarkers() {
		        markers.forEach(marker => {
		            marker.setMap(null);
		        });
		        markers = [];
		    }
</script>
</body>
</html>